<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="../css/gh-zhuce.css"/>
		<script src="../js/rem.js"></script>
	</head>
	<body>
		<header>
			<a href="gh-qidong.html">取消</a>
			<h2>注册</h2>
		</header>
		<section>
			<div class="mask"></div>
			<form action="" method="post" onsubmit="return check(this)">
			    <div class="phone">
					<span>手机号码</span>
					<input type="text" name="phone" id="phone" value="" placeholder="请输入手机号码" />
				</div>
				<div class="bigyzm">
					<div class="yzm">
						<span>验证码</span>
						<input type="text" name="yzm" id="yzm" value="" placeholder="请输入验证码" />
					</div>
					<div class="hqyzm">
						<span>获取验证码</span>
					</div>
				</div>
				<div class="biguser">
					<div class="userName">
						<span>个人昵称</span>
						<input type="text" name="name" id="name" value="" placeholder="请输入个人昵称" />
					</div>
					<div class="xian3"></div>
					<div class="password">
						<span>设置密码</span>
						<input type="password" name="pwd" id="pwd" value="" placeholder="8-20位数字和字母组合" />
					</div>
					<div class="xian3"></div>
					<div class="qrpassword">
						<span>确认密码</span>
						<input type="password" name="pwd2" id="pwd2" value="" placeholder="请重复输入密码"/>
					</div>
				</div>
				<div class="ckbox">
					<input type="checkbox" name="ckb" id="ckb" value="" /><span>我已阅读并接受&nbsp;&nbsp;<a href="#">优呗小店用户注册协议</a></span>
				</div>
				<input type="submit" name="sub" id="sub" value="完成" />
			</form>
		</section>
		<script type="text/javascript">
			var mk = document.querySelector(".mask");
			var hqyzm = document.querySelector(".hqyzm>span");
			var btn = document.querySelector("input[type='submit']");
			var timer=null;
            var isok=false;
                hqyzm.addEventListener("click",function(){
                	var i=60;
                	if(!isok){
                		isok=true;
                		timer=setInterval(function(){
							i--;
							hqyzm.innerText=i+"秒重新获取";
							if(i==0){
			                    //清空计时器
			                    clearInterval(timer);
			                    hqyzm.innerText="获取验证码";
			                    isok=false;
							}
						},1000)	
                	}
                })
			function check(){
//			手机号码
				var phone=document.querySelector(".phone>input[type='text']");
				if(phone.value==''){
					mk.innerText="号码不能为空";
					mk.style="display:block";
					setTimeout(function(){
                        mk.style="display:none";
					},1500)
					phone.focus();
					return false;
				}else{
					var phone_reg = /^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}/;//手机
//      			var tel_reg = /^([0-9]{3,4}-)?[0-9]{7,8}$/;电话
					if(!phone_reg.test(phone.value)){      //&& !tel_reg.test(phone.value)加上判断电话
						mk.innerText="号码格式不正确";
						mk.style="display:block";
						setTimeout(function(){
	                        mk.style="display:none";
						},1500)
						phone.focus();
						return false;
					}
				}
                
//			个人昵称
				var name=document.querySelector(".userName>input[type='text']");	
				if(name.value==''){
					mk.innerText='昵称不能为空';
					setTimeout(function(){
                        mk.style="display:none";
					},1500)
					name.focus();
					return false;
//					debugger
				}else{
					var vname=(/^[a-zA-Z\u4e00-\u9fa5]{1,10}$/);
				    if (!vname.test(name.value)) {
					    mk.innerText='个人昵称1-10个字，只能是中文或英文';
					    setTimeout(function(){
	                        mk.style="display:none";
						},1500)
					    name.focus();
					    return false; 
				    }
				}					 					
							
//			密码
				var pwd1=document.querySelector(".password>input[type='password']");
				if(pwd1.value==''){
					mk.innerText='密码不能为空';
					setTimeout(function(){
                        mk.style="display:none";
					},1500)
					pwd1.focus();
					return false;
				}else{
					var vpwd = /^[A-Za-z0-9]+$/;
					if(!vpwd.test(pwd1.value)){
						mk.innerText='密码错误，密码由数字和字母组成';
						setTimeout(function(){
	                        mk.style="display:none";
						},1500)
						pwd1.focus();
						return false;
					}else{
						if(pwd1.value.length<8 || pwd1.value.length>20){
							mk.innerText='密码不能少于8位或超出20位';
							setTimeout(function(){
		                        mk.style="display:none";
							},1500)
							pwd1.focus();
							return false;
						}
					}
				}
				
//			验证密码
				var pwd2=document.querySelector(".qrpassword>input[type='password']");
				if(!(pwd2.value==pwd1.value)){
					mk.innerText='确认密码与第一次输入不同，请重新输入';
					setTimeout(function(){
                        mk.style="display:none";
					},1500)
					pwd2.focus();
					return false;
				}
			
//			邮箱
//				var email = document.getElementById('email');
//				if(email.value==''){
//					alert('邮箱不能为空');
//					email.focus();
//					return false;
//				}else{
//					var vemail = /^[0-9a-zA-Z]+(?:[\_\.\-][a-z0-9\-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\.[a-zA-Z]+$/i;
//					if(!vemail.test(email.value)){
//						alert('邮箱格式错误');
//						email.focus();
//						return false;
//					}
//				}
//			地址
//				var address = document.getElementById('address');
//				if(address.value==''){
//					alert('地址不能为空');
//					address.focus();
//					return false;
//				}else{
//					if(address.value.length<8){
//						alert('不能少于8个字');
//						address.focus();
//						return false;
//					}
//				}
			
		}
	</script>
	</body>
</html>
